<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>vue基础知识</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <a v-text="name"></a>
        <a v-html="name"></a>
        <a v-html="name.length"></a>
        <a v-html="name"></a>
        <a v-show="age">{{msg}}</a>
        <a>{{count+1}}</a>
        <a>{{name+123}}</a>
        <h1>---------------</h1>
        <a v-text="msg"></a>
        <a>{{msg=="小明"}}</a>
        <a href="images/1.jpg">图片</a>
        <a href="images/1.jpg">图片</a>
        <h1>---------------</h1>
        <a v-text="user.id"></a>
        <a v-text="user.name"></a>
        <a v-text="user.age"></a>
        <a v-text="users[0]"></a>
        <h1>---------------</h1>
        <a v-for="value,index in users">{{index}}----{{value}}</br></a>
        <h1>---------------</h1>
        <a v-for="user,index in userList">{{user.id}}----{{user.name}}----{{user.age}}</br></a>
        <table border="1" width="100%" v-show="userList">
            <tr>
                <th>主键</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
            <tr v-for="user,index in userList">
                <td>{{user.id}}</td>
                <td v-text="user.name"></td>
                <td v-show="user">{{user.age}}</td>
            </tr>
        </table>

        <h1></h1>
        <h1>点我加一</h1>

    </div>
</body>
</html>

<script src="js/vue.js"></script>

<script>
    new Vue({
        el:"#app",
        data:{
            msg:"小明",
            name:"<h2>小红</h2>",
            age:"",
            count:10,
            user:{id:1,name:"小黑",age:12},
            users:[1,2,3,4,5],
            userList:[{id:1,name:"小黑",age:12},{id:2,name:"小白",age:12},{id:3,name:"小花",age:12},]
        }
    })
</script>
